<style lang="less">
  @import "trainManage";
</style>

<template>
  <div class="train">
    <div class="train-search">
      <Card align="left">
        <Row>
          <Col span="4">训练查询</Col>
          <Col span="4" offset="14">
            <Input v-model="name" placeholder="请输入训练的名字">
              <Button slot="append" icon="ios-search" @click="sendInfo"></Button>
            </Input>
          </Col>
          <Col span="1" offset="1">
            <Button icon="ios-add-circle-outline" to="/algorithm/createTrain"></Button>
          </Col>
        </Row>
      </Card>
    </div>
    <div class="train-table">
      <Table border :columns="columns" :data="data"></Table>
    </div>
    <Modal v-model="modal" fullscreen title="训练详情">
      <div class="train-info">
        <div class="train-info-round">
          <Card>
            <i-circle
              :size="300"
              :trail-width="4"
              :stroke-width="5"
              :percent="(currentTurn/allTurn)*100"
              stroke-linecap="square"
              dashboard
              stroke-color="#43a3fb">
              <div class="demo-Circle-custom">
                <h1>{{currentTurn}}/{{allTurn}}</h1>
                <p>Epoch</p>
                <span>
                  <i>{{samples}}</i><br>
                  <i>SAMPLES</i>
              </span>
              </div>
            </i-circle>
            <Row>
              <Col span="5" offset="5">ELAPSED</Col>
              <Col span="10">{{elapsed}}</Col>
            </Row>
            <Row>
              <Col span="5" offset="5">ESTIMATE</Col>
              <Col span="10">{{estimate}}</Col>
            </Row>
          </Card>
        </div>
        <div class="train-info-function">
          <Card style="height: 55px">
            <Row>
              <Col span="6">
                <Button icon="ios-pause-outline">暂停训练</Button>
              </Col>
              <Col span="6">
                <Button icon="ios-paper-outline">训练日志</Button>
              </Col>
              <Col span="6">
                <Button icon="ios-copy-outline">复制</Button>
              </Col>
              <Col span="6">
                <Button icon="ios-trash-outline">删除</Button>
              </Col>
            </Row>
          </Card>
        </div>
        <div class="train-info-info">
          <Card align="left">
            <p slot="title">训练信息</p>
            <Row>
              <Col span="8">PARAMETER</Col>
              <Col span="16">{{parameter}}</Col>
            </Row>
            <Row>
              <Col span="8">BATCH SIZE</Col>
              <Col span="16">{{batchSize}}</Col>
            </Row>
            <Row>
              <Col span="8">DATA</Col>
              <Col span="8">TRAINING</Col>
              <Col span="8">{{training}}</Col>
            </Row>
            <Row>
              <Col span="8" offset="8">VALODATION</Col>
              <Col span="8">{{valodation}}</Col>
            </Row>
          </Card>
        </div>
        <div class="train-info-property">
          <Card align="left">
            <p slot="title">训练属性</p>
            <Row>
              <Col span="8">模型</Col>
              <Col span="16">{{modelName}}</Col>
            </Row>
            <Row>
              <Col span="8">数据集</Col>
              <Col span="16">{{dataSet}}</Col>
            </Row>
            <Row>
              <Col span="7" offset="1">版本</Col>
              <Col span="16">{{version}}</Col>
            </Row>
            <Row>
              <Col span="8">创建时间</Col>
              <Col span="16">{{createTime}}</Col>
            </Row>
          </Card>
        </div>
        <div class="train-info-chart1" ref="1" style="width: 900px;height:400px"></div>
        <div class="train-info-chart2" ref="2" style="width: 900px;height:400px"></div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import echarts from "echarts/lib/echarts";
  import "echarts/lib/chart/line";
  import "echarts/lib/component/tooltip";
  import "echarts/lib/component/title";
  function genearte(len = 100) {
    return Array.from({length: len}, () => {
      return Math.random();
    });
  }
  export default {
    name: "trainManage",
    components:{
    },
    data() {
      return {
        name: '',
        currentTurn:25,
        allTurn:50,
        parameter:0,
        batchSize:0,
        training:0,
        valodation:0,
        modal:false,
        modelName:'啤酒模型一',
        dataSet:'百威啤酒数据集',
        version:'v2',
        createTime:'2018-10-10 20:20:30',
        samples:'12000',
        elapsed:'00:01:20',
        estimate:'00:09:12',
        columns: [
          {
            title:'ID',
            key:'id',
            width:70
          },
          {
            title: '训练名',
            key: 'name',
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'person'
                  }
                }),
                h('strong', params.row.name)
              ]);
            }
          },
          {
            title:'增广方法',
            key:'augmentType',
          },
          {
            title:'创建时间',
            key:'createTime'
          },
          {
            title: '操作',
            key: 'action',
            width: 140,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size:'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'error',
                    size:'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        data: [
          {
            id:1,
            name: '啤酒一训练',
            augmentType:'翻转',
            createTime:'2019-01-12 20:12:10'
          },
          {
            id:2,
            name: '啤酒一训练',
            augmentType:'翻转',
            createTime:'2019-01-12 20:12:10'
          },
          {
            id:3,
            name: '啤酒一训练',
            augmentType:'翻转',
            createTime:'2019-01-12 20:12:10'
          },
          {
            id:4,
            name: '啤酒一训练',
            augmentType:'翻转',
            createTime:'2019-01-12 20:12:10'
          }
        ],
        myChart: null,
        myChart2: null,
        option: {
          title: {
            text: "损失率"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["准确率", "召回率", "mAp"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: Array.from({length: 200}, (_, index) => index)
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "损失率",
              type: "line",
              data: genearte(200)
            }
          ]
        },
        option2: {
          title: {
            text: "准确率-召回率-mAp"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["准确率", "召回率", "mAp"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: Array.from({length: 100}, (_, index) => index)
          },
          yAxis: {
            type: "value",
            min: 0,
            max: 1
          },
          series: [
            {
              name: "准确率",
              type: "line",
              data: genearte()
            },
            {
              name: "召回率",
              type: "line",
              data: genearte()
            },
            {
              name: "mAp",
              type: "line",
              data: genearte()
            }
          ]
        }
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.myChart = echarts.init(this.$refs["1"]);
        this.myChart2 = echarts.init(this.$refs["2"]);
        this.myChart.setOption(this.option);
        this.myChart2.setOption(this.option2);
      });
    },
    methods: {
      //发送查询训练的条件
      sendInfo() {

      },
      //查看具体训练信息
      show(index){
        this.modal=true;
        this.trainName=this.data[index].name;
      },
      //删除模型
      remove(index){
        this.data.splice(index, 1);
      }
    }
  }
</script>

<style lang="less">
  .demo-Circle-custom{
    & h1{
      color: #3f414d;
      font-size: 28px;
      font-weight: normal;
    }
    & p{
      color: #657180;
      font-size: 14px;
      margin: 10px 0 15px;
    }
    & span{
      display: block;
      padding-top: 15px;
      color: #657180;
      font-size: 14px;
      &:before{
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -15px;
      };
    }
    & span i{
      font-style: normal;
      color: #3f414d;
    }
  }
</style>
